<template>
  <div>
    <h1>我的拼团订单</h1>

    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="orderId" label="ID" />
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <span v-if="scope.row.orderStatus == 0">未支付</span>
            <span v-if="scope.row.orderStatus == 1">已支付</span>
            <span v-if="scope.row.orderStatus == 2">待发货</span>
          </template>
        </el-table-column>

        <el-table-column prop="orderAmount" label="订单金额" />
        <el-table-column prop="payTime" label="支付时间" />
        <el-table-column prop="prodInfo" label="商品" />
        <el-table-column prop="orderType" label="订单类型">
          <template #default="scope">
            <span v-if="scope.row.orderType == 1">普通订单</span>
            <span v-if="scope.row.orderType == 2">秒杀订单</span>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="开始时间" />
        <el-table-column label="操作">
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button
                type="danger"
                :icon="Delete"
                circle
                @click="onDeleteOrder(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getMyOrderList, deleteOrder } from "@/api/api";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";

const router = useRouter();
const tableData = ref([]);
//删除订单
const onDeleteOrder = (row: any) => {
  ElMessageBox.confirm("数据删除后无法恢复,您确认删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteOrder(row).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("删除成功");
          loadList();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {});
};

const loadList = () => {
  getMyOrderList().then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data;
    }
  });
};
onMounted(() => {
  loadList();
});
</script>

<style scoped></style>
